<template>
  <header class="header-area">
    <div class="main-header">
      <div class="container">
        <div class="row">
          <div class="col-lg-12" style="width: 100%;">
            <div
              class="main-header-item d-flex justify-content-between align-items-center"
            >
              <div class="main-header-menus  d-flex">
                <div class="logo" style="height: 10px">
                  <a href="/"
                    ><img
                      style="height: 70px"
                      src="/assets/images/logo.png"
                      alt=""
                  /></a>
                </div>

                <div class="header-menu d-none d-lg-block">
                  <ul>
                    <li>
                      <a class="active" @click="$router.push('/')">首页</a>
                    </li>
                    <li>
                      <a href="#" @click="toRouter()">信息智能处理</a>
                      <ul v-if="username" class="sub-menu">
                        <li>
                          <nuxt-link to="/search">信息处理</nuxt-link>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#" @click="toRouter()">智能处理样理展示</a>
                      <ul v-if="username" class="sub-menu">
                        <li>
                          <nuxt-link to="/single-service">样例展示</nuxt-link>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#" @click="toRouter()">经典作者介紹</a>
                      <ul v-if="username" class="sub-menu">
                        <li><nuxt-link to="/authors">作者介绍</nuxt-link></li>
                        <li>
                          <nuxt-link to="/single-author">作者详情</nuxt-link>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#" @click="toRouter()">查看历史记录</a>
                      <ul v-if="username" class="sub-menu">
                        <li><nuxt-link to="/hist">历史记录</nuxt-link></li>
                      </ul>
                    </li>
                    <li>
                      <a v-if="!username" @click="$router.push('login')"
                        >去登陆</a
                      >
                      <span v-else>{{ username }}</span>
                    </li>
                    <li>
                      <a v-if="username" @click="Esc()">退出</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      mobileToggle: false,
      username: ""
    };
  },
  methods: {
    Esc() {
      this.username = "";
      console.log("登出");
      localStorage.clear();
      this.$router.push("/");
    },
    toRouter() {
      if (this.username === "") {
        this.$confirm("请先去登陆", "提示", {
          distinguishCancelAndClose: true,
          confirmButtonText: "確定",
          cancelButtonText: "取消"
        })
          .then(() => {
            window.location.href = "/login";
          })
          .catch(action => {
            console.log("取消");
          });
      } else {
        this.$router.push("/search");
      }
    }
  },
  mounted() {
    const userName = JSON.parse(localStorage.getItem("user"));
    if (userName) {
      this.username = userName.username;
    }
  }
};
</script>

<style scoped lang="scss"></style>
